import React, { Component } from "react";
import styles from "./PicCompare.less";
import feedback1 from "../../../../assets/feedback1.jpg";
import feedback2 from "../../../../assets/feedback2.jpg";
import onlyPic from "../../../../assets/onlyPic.png";
import people from "../../../../assets/people.jpg";
import onlyText from "../../../../assets/onlyText.png";
import PicnText from "../../../../assets/PicnText.png";
import handleData from "./handleData";

class PicCompare extends Component {
  renderContent = type => {
    if (type === "1") {
      return "文本反馈";
    }
    if (type === "2") {
      return "图文反馈";
    }
    if (type === "3") {
      return "纯图片";
    }
    return "人像对比";
  };

  renderContentPic = type => {
    if (type === "1") {
      return onlyText;
    }
    if (type === "2") {
      return PicnText;
    }
    if (type === "3") {
      return onlyPic;
    }
    return people;
  };

  renderFeedbackPic = type => {
    if (type === "1") {
      return feedback2;
    }
    return feedback1;
  };

  renderText = value => {
    if (value === "1") {
      return "勾选反馈";
    }
    if (value === "2") {
      return "文本反馈";
    }
    return "综合反馈模板";
  };

  render() {
    const { detailScene } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.details}>
          <span className={styles.title}>详细内容</span>
          <div className={styles.model}>
            <div className={styles.leftmodel}>
              <div style={{ marginBottom: 16 }}>
                内容模板：
                <span className={styles.content}>
                  {this.renderContent(detailScene.contentType)}
                </span>
              </div>
              <div style={{ marginBottom: 16 }}>
                反馈模板：
                <span className={styles.content}>
                  {this.renderText(detailScene.commentType)}
                </span>
              </div>
              <div style={{ marginBottom: 16 }}>
                地点：
                <span className={styles.content}>
                  {detailScene.sceneTemplateRules
                    ? detailScene.sceneTemplateRules.map(item => {
                        if (item.messageUnitName === "position") {
                          return item.messageParameter;
                        }
                        return "";
                      })
                    : "-"}
                </span>
              </div>
              <div style={{ marginBottom: 16 }}>
                抓拍图：
                <span className={styles.content}>
                  {detailScene.sceneTemplateRules
                    ? detailScene.sceneTemplateRules.map(item => {
                        if (item.messageUnitName === "partSnapshot") {
                          return item.messageParameter;
                        }
                        return "";
                      })
                    : "-"}
                </span>
              </div>
              <div style={{ marginBottom: 16 }}>
                抓拍全景：
                <span
                  className={styles.content}
                  style={{ width: "calc(100% - 120px)" }}
                >
                  {detailScene.sceneTemplateRules
                    ? detailScene.sceneTemplateRules.map(item => {
                        if (item.messageUnitName === "fullSnapshot") {
                          return item.messageParameter;
                        }
                        return "";
                      })
                    : "-"}
                </span>
              </div>
              <div className={styles.description} style={{ marginBottom: 16 }}>
                证件照：
                <span className={styles.content}>
                  {detailScene.sceneTemplateRules
                    ? detailScene.sceneTemplateRules.map(item => {
                        if (item.messageUnitName === "idPhoto") {
                          return item.messageParameter;
                        }
                        return "";
                      })
                    : "-"}
                </span>
              </div>
              <div className={styles.description} style={{ marginBottom: 16 }}>
                相似度：
                <span className={styles.content}>
                  {detailScene.sceneTemplateRules
                    ? detailScene.sceneTemplateRules.map(item => {
                        if (item.messageUnitName === "similarity") {
                          return item.messageParameter;
                        }
                        return "";
                      })
                    : "-"}
                </span>
              </div>
              {detailScene.contentType === "3" ? null : (
                <div style={{ display: "flex", marginBottom: 16 }}>
                  <div className={styles.desc}>内容展示：</div>
                  <span
                    className={styles.content}
                    style={{ width: "calc(100% - 120px)" }}
                  >
                    {handleData.contentShow(detailScene) === ""
                      ? "-"
                      : handleData.contentShow(detailScene)}
                  </span>
                </div>
              )}
              {detailScene.commentType !== "1" ? (
                <div
                  className={styles.description}
                  style={{ marginBottom: 16 }}
                >
                  <div className={styles.descNoContent}>
                    字段无内容时展示内容：
                  </div>
                  <div
                    className={styles.noContent}
                    style={{ width: "calc(100% - 204px)" }}
                  >
                    这个场景描述有点长这个场景描述有点长长
                  </div>
                </div>
              ) : null}
              {detailScene.commentType === "1" ? (
                <div
                  className={styles.description}
                  style={{ marginBottom: 16 }}
                >
                  <div className={styles.desc}>反馈文本：</div>
                  <div
                    className={styles.content}
                    style={{ width: "calc(100% - 120px)" }}
                  >
                    {detailScene.msgCommentSceneQueryList
                      ? detailScene.msgCommentSceneQueryList
                          .map(item => item.content)
                          .join("；")
                      : "-"}
                  </div>
                </div>
              ) : null}
            </div>
            <div className={styles.rightmodel}>
              模板示例：
              <img
                src={this.renderContentPic(detailScene.contentType)}
                className={styles.pic}
              />
              <img
                src={this.renderFeedbackPic(detailScene.commentType)}
                className={styles.feedbackPic}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PicCompare;
